import React, { Component } from 'react'
import QueryList from '@/components/basicWidget/QueryList'
import { Modal, message } from 'antd'
import SqlCard from '@/components/viewWidget/SqlCard'
import { _delete } from '@/utils/requestUtil'
import { TableButton } from '@/components/basicWidget/Button'

const {confirm} = Modal

class sqlManage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            editModalProps: {
                modalVisual: false
            },
            editCode: null
        }
    }

    async componentDidMount() {
    }

    actionColumns = (columns, data) => {
        columns.push({ title: '操作', dataIndex: 'edit' })
        data = data.map(item => {
            item.edit = (
                <TableButton onClick={this.editModalOpen(item.commandCode)}>修改</TableButton>
            )
            return item
        })
        return { newColumns: columns, newData: data }
    }

    editModalOpen = (commandCode) => {
        return async () => {
            await new Promise(resolve => {
                this.setState(preState => {
                    return {
                        editModalProps: {
                            ...preState.editModalProps,
                            modalVisual: true,
                        },
                        editCode: commandCode,
                        editModalKey: new Date().getTime() + ''
                    }
                }, resolve)
            })
        }
    }

    onAdd = async () => {
        await this.editModalOpen(null)()
    }

    onDelete = async () => {
        const {selectedRows} = this.queryList.state
        if (selectedRows.length === 0) {
            message.warning('请选择要删除的数据')
            return
        }
        confirm({
            content: `确定要删除这条语句配置吗`,
            onOk: async () => {
                const response = await _delete(`/api/sqlCode/delete/${selectedRows[0].commandCode}`)
                if (response && response.data === true) {
                    message.success('删除成功')
                    await this.queryList.onQuery()
                }
            },
            onCancel: () => {return}
        })
    }

    editModalCancel = async () => {
        await new Promise(resolve => {
            this.setState(preState => {
                return {
                    editModalProps: {
                        ...preState.editModalProps,
                        modalVisual: false
                    }
                }
            }, resolve)
        })
        await this.queryList.onQuery()
    }

    renderEditModal = () => {
        return (
            <Modal
                title='语句配置'
                open={this.state.editModalProps.modalVisual}
                onCancel={this.editModalCancel}
                footer={null}
                width={'80%'}
            >
                <SqlCard
                    key={this.state.editModalKey}
                    commandCode={this.state.editCode}
                ></SqlCard>
            </Modal>
        )
    }

    render() {
        return (
            <>
                <QueryList
                    queryCode='sqlManage'
                    actionColumns={this.actionColumns}
                    onAdd={this.onAdd}
                    onDelete={this.onDelete}
                    ref={queryList => this.queryList = queryList}
                >
                </QueryList>
                {this.renderEditModal()}
            </>
        )
    }
}

export default sqlManage
